<template lang="html">
   <!-- 列表对应部分 -->
   <div class="choice_list_box">
      <p class="choice_list_title">热门国家</p>
      <div class="choice_img_box">
         <img src="http://appnh5.caissa.com.cn/images/country_rb.png" alt="">
         <span>日本</span>
         <img  v-if="img_a" class="dg" src="../../static/imgs/dg.png" alt="">
      </div>
      <div class="choice_img_box">
         <img src="http://appnh5.caissa.com.cn/images/country_tg.png" alt="">
         <span>泰国</span>
         <img v-show="img_b" class="dg" src="../../static/imgs/dg.png" alt="">
      </div>
      <div  class="choice_img_box">
         <img src="http://appnh5.caissa.com.cn/images/country_alq.png" alt="">
         <span>阿联酋</span>
         <img v-show="img_c" class="dg" src="../../static/imgs/dg.png" alt="">
      </div>


      <p class="choice_list_title">其他国家或地区</p>
      <div class="hot_city">
         <!-- <span @click="changecolor()">台湾</span>
         <span>越南</span>
         <span>柬埔寨</span>
         <span>马来西亚</span>
         <span>印尼</span>
         <span>文莱</span>
         <span>菲律宾</span>
         <span>印度</span>
         <span>尼泊尔</span>
         <span>斯里兰卡</span>
         <span>马尔代夫</span>
         <span>塞班岛</span>
         <span>巴厘岛</span> -->
         <div class="checks">
           <el-checkbox class="plan_ch" v-model="checked1" label="台湾" border></el-checkbox>
           <el-checkbox class="plan_ch" v-model="checked2" label="柬埔寨" border></el-checkbox>
           <el-checkbox class="plan_ch" v-model="checked3" label="马来西亚" border></el-checkbox>
           <el-checkbox class="plan_ch" v-model="checked4" label="印尼" border></el-checkbox>
           <el-checkbox class="plan_ch" v-model="checked5" label="台湾" border></el-checkbox>
           <el-checkbox class="plan_ch" v-model="checked6" label="柬埔寨" border></el-checkbox>
           <el-checkbox class="plan_ch" v-model="checked7" label="印度" border></el-checkbox>
           <el-checkbox class="plan_ch" v-model="checked8" label="尼泊尔" border></el-checkbox>
           <el-checkbox class="plan_ch" v-model="checked9" label="斯里兰卡" border></el-checkbox>
           <el-checkbox class="plan_ch" v-model="checked10" label="马尔代夫" border></el-checkbox>
           <el-checkbox class="plan_ch" v-model="checked11" label="塞班岛" border></el-checkbox>
           <el-checkbox class="plan_ch" v-model="checked12" label="巴厘岛" border></el-checkbox>
         </div>
      </div>
      </div>
   </div>
</template>

<script>
export default {
   data(){
      return{
         checked1: '',
         checked2: '',
         checked3: '',
         checked4: '',
         checked5: '',
         checked6: '',
         checked7: '',
         checked8: '',
         checked9: '',
         checked10: '',
         checked11: '',
         checked12: '',
         img_a: true,
         img_b: false,
         img_c: false
      }
   },
   methods:{
   }
}
</script>

<style lang="css">
.choice_list_box{
   width:100%;
   /*height:30rem;*/
   margin-top:1.5rem;
}
.choice_list_title{
   display: inline-block;
   width:88%;
   margin:0 auto;
   height:2rem;
   font-size: 1.7rem;
   text-align: left;
   line-height: 2rem;
   padding-left: 1rem;
   border-left: 0.5rem solid #ffae0d;
   border-radius: 0.5rem;
}
.choice_img_box{
   width:47%;
   height:10rem;
   margin-left: 0.7rem;
   margin-bottom: 1rem;
   float: left;
   position: relative;
   border-radius: 0.5rem;
}
.choice_img_box img{
   width:100%;
   height:auto;
   border-radius: 0.8rem;
}
.choice_img_box .dg{
   width:5rem;
   height: 5rem;
   position: relative;
   top:-10rem;
}
.choice_img_box span{
   display: inline-block;
   width:100%;
   height:2rem;
   line-height: 0rem;
   /*margin-bottom: 1rem;
   margin-left: -1rem;
   margin-top: 0;*/
   position: relative;
   top:-2.5rem;
   margin-left: -1.5rem;
   /*bottom: -0.5rem;*/
   left: 0.8rem;
   line-height: 2.5rem;
   background-color: rgba(0,0,0,0.5);
   color: #fff;
   font-weight: bolder;
   border-radius: 0.5rem;
}

.hot_city{
   width: 95%;
   margin:0 auto;
   margin-top: 1rem;
   margin-bottom: 2rem;
}
.hot_city .plan_ch{
   width:13rem;
   margin-bottom: 1rem;
}
/*.hot_city span{
   display: inline-block;
   width: 22%;
   height: 3.5rem;
   line-height: 3.5rem;
   font-size: 1.5rem;
   border:  0.1rem solid #999;
   border-radius: 0.7rem;
   color: #999;
   margin-bottom: 1rem;
   float: left;
   margin-left: 0.8rem;
   margin-top: 0.3rem;
}
.hot_span_css{
   color: #00b0ec;
   border:  0.1rem solid #00b0ec;
}*/
</style>
